<template>
        <!-- welcome -->
	<div class="welcome agileits">
		<div class="container">
			<div class="welcome-w3lsrow" style="padding:3em 0;">
				<div class="col-md-7 col-sm-7 w3welcome-left" style="margin-top:-6em;">
					<div class="w3welcome-text">
						<h5 class="w3l-subtitle">{{max_count.title}}</h5>
						<p>小编推荐：今天亲身经历，希望大家以后不要再受骗，不要相信托运，不要先付款。最好亲自开车去当面认领。前段时间在这里留了贴说想领养狗，今天就有一个加我微信的说免费二哈领养。没经受住小狗崽照片的诱惑就聊了下去，这女骗子聊了一会就问我是哪的人，我说广东的她就说她是湖北武汉的，很远，只能空运或者大巴.
						然后就开始说她的什么亲戚是大悟汽车站的司机能帮忙托运，然后说车是几点发的，几点到东莞的，都说的有板有眼的...</p>
						<p>点击量：{{max_count.count}}</p>
						<p>发布时间：{{max_count.timestamp}}</p>
						<p>发布用户：{{max_count.author}}</p>
						<router-link :to="'/detail/' + max_count.id" class="button button-isi"><span>更&nbsp;&nbsp;多</span><i class="icon glyphicon glyphicon-arrow-right"></i></router-link>
					</div>
				</div>
				<div class="col-md-5 col-sm-5 w3welcome-img" >
					<img :src="'data:image/png;base64,' + max_count.image" alt="" style="margin-left:50px">
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="welcome-w3lsrow2">
				<div class="col-sm-3 team-grid" v-for="item in lst" :key="item.id">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<img :src="'data:image/png;base64,' + item.image" alt="" >
								
							</div>
							<div class="back" @click="gotoDetail(item.id)">
								<h4>{{item.author}}</h4>
								<p>{{item.title}}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<pagination-box :num='total' :name="'/'" style="margin-top:20px"></pagination-box>
		</div>
	</div>
	<!-- //welcome -->
</template>

<script>
import pagination from './subcomponents/pagination.vue'
export default {
    data() {
        return {
			max_count:'',
			lst:[],
			total:0,
			page:this.$route.query.page || 1
		};
	},
	created(){
		this.getAll()
		this.maxCount()
	},
	watch:{
		$route(to, from){
			if(to.query.page != from.query.page){
				this.page = to.query.page
				this.getAll()
			}
		}
	},
    methods: {
		getAll(){
			var that = this
			const path = 'http://10.138.120.46:5000/api/home?page=' + this.page
			this.axios.get(path).then((response)=>{
				if(response.status === 200){
					that.total = response.data[0]
					that.lst = response.data.slice(1)
				}
			}).catch((error)=>{
				alert(error)
			})
		},
		maxCount(){
			var that = this
			const path = 'http://10.138.120.46:5000/api/max_count'
			this.axios.get(path).then((response)=>{
				if(response.status === 200){
					that.max_count = response.data
				}
			}).catch((error)=>{
				alert(error)
			})
		},
		gotoDetail(id){
			this.$router.push({
				name: 'detail',
				params: { id: id }
			})
		}
	},
	components:{
		'pagination-box':pagination
	}
};
</script>

<style scoped lang="scss">
.container{
	padding:6em 0;
}
</style>
